import React, {Component} from 'react';
import MyHeader from "../MyUIComponent/MyHeader";
import {List} from "antd";
import {axiosGetFunction} from "../MyConfig/AppConfig";

class AllLogicComponent extends Component {
    state = {
        logic_component_list: []
    }

    componentDidMount() {
        console.log("AllLogicComponent: componentDidMount")
        let userIdStr = localStorage.getItem("userInfo:id")
        if (userIdStr){
            axiosGetFunction(
                "/logic_component/all?user_id="+userIdStr,
                (received_data)=>{
                    console.log("received_data", received_data)
                    this.setState({
                        logic_component_list: received_data.dataList
                    })
                }
            )
        }
    }

    render() {
        let { logic_component_list } = this.state;
        return (
            <div>
                <MyHeader pathname="all_logic_component"/>
                <div style={{ margin: "20px" }}>
                    <h2>我的逻辑组件</h2>
                    <List
                        itemLayout="vertical"
                        pagination={{
                            onChange: page => {
                                console.log(page);
                            },
                        }}
                        dataSource={logic_component_list}
                        renderItem={(item)=>(
                            <List.Item
                                key={item.title}
                            >
                                【ID】{item.logic_component_id}【组名】{item.group_name}【标题】{item.title}【文本】{item.text_str}
                            </List.Item>)
                        }
                    />
                </div>
            </div>
        );
    }
}

export default AllLogicComponent;
